<template>
  <ul class="data-change" style="height: 58px">
    <li v-for="(m,index) in list">
      <div class="data-icon"><i class="ivu-icon" :class="m.icon"></i></div>
      <div>
        <p>{{m.data}}<i class="ivu-icon" :class="m.up"></i></p>
        <p>{{m.name}}</p>
      </div>
    </li>

  </ul>
</template>

<script>
  import {getDataChange}from '../../../service'
import { mapMutations } from 'vuex'

export default {
data () {
return {
list: []
};
},
methods: {
...mapMutations([
'FAILURE_GET_LOGINS',
'SUCCESS_GET_LOGINS'
]),
},
mounted () {
this.$nextTick(() => {
getDataChange().then(function(respon){
this.SUCCESS_GET_LOGINS(respon);
this.list = respon.data;
}.bind(this),function(){
this.FAILURE_GET_LOGINS();
}.bind(this));
});
}
};
</script>

<style>
.data-change>li{
  float: left;
  width: 20%;
  display: inline-block;
}
.data-change>li>div{
  float:left;
}
.data-change>li>div.data-icon{
  font-size: 40px;
  margin: 0 10px;
}
.data-change>li>div.data-icon+div{
  margin:9px;
}
.data-change>li>div.data-icon+div .ivu-icon{
margin-left: 5px;
}
</style>
